<template>
    <div class="xy-view view-container">
        <div class="view-item__header">
            {{ props.title }}
        </div>
        <div class="view-item__content" v-if="imgUrl">
            <img :src="imgUrl"/>
        </div>
    </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
    name: 'XYView'
})
</script>
<script lang="ts" setup>
import { onMounted, reactive, watchEffect, onUpdated, watch, computed } from 'vue';
import { deviceManager } from '@/services/phot_client/device';
import { useStore } from 'vuex';
const store = useStore()
const props = defineProps({
    title: {
        type: String,
        default: 'XY视图'
    },
    type: {
        type: String,
        default: ''
    },
    dateTime: {
        type: String,
        default: ''
    }
})
const mainRef = reactive({
    img: ''
})
const imgUrl = computed(() =>{
    let curFigures = deviceManager.figures.get(deviceManager.photGridId)
    return curFigures[props.dateTime][props.type]
})
// watch(() => deviceManager.figures, (v1) => {
//     // console.log(v1)
//     mainRef.img = store.state.figures[props.type]
// }, {
//     deep: true,
//     immediate: true
// })
</script>